<template>
    <view class="container">
        <view class="header">
            <view class="back-btn iconfont icon-back" @click="goBack"></view>
            <text class="title">用户列表</text>
            <view class="menu-btn iconfont icon-menu"></view>
        </view>
        <scroll-view class="list-container" scroll-y>
            <view class="user-card" v-for="(user, index) in userList" :key="index">
                <image class="user-image" :src="user.image" mode="aspectFill" />
                <view class="user-info">
                    <text class="user-name">{{ user.name }}</text>
                    <view class="user-details">
                        <text class="detail">{{ user.location }}</text>
                        <text class="detail">| {{ user.age }}岁</text>
                    </view>
                    <text class="status">{{ user.status }}</text>
                </view>
                <view class="hi-btn">
                    <text>Hi</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userList: [
                    {
                        name: "冠冠亦安",
                        image: "your_image_url_1",
                        location: "北京·朝阳区",
                        age: 28,
                        status: "活跃",
                    },
                    {
                        name: "老张",
                        image: "your_image_url_2",
                        location: "上海·浦东新区",
                        age: 35,
                        status: "活跃",
                    },
                    {
                        name: "张三",
                        image: "your_image_url_3",
                        location: "深圳·南山区",
                        age: 26,
                        status: "在线",
                    },
                    {
                        name: "刘先生",
                        image: "your_image_url_4",
                        location: "广州·天河区",
                        age: 40,
                        status: "在线",
                    },
                    {
                        name: "飞鸟",
                        image: "your_image_url_5",
                        location: "南京·鼓楼区",
                        age: 29,
                        status: "活跃",
                    },
                ],
            };
        },
        methods: {
            goBack() {
                uni.navigateBack();
            },
        },
    };
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #f5f5f5;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background-color: #fff;
        box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
    }

    .back-btn,
    .menu-btn {
        font-size: 40rpx;
        color: #333;
    }

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    .list-container {
        flex: 1;
        padding: 20rpx;
    }

    .user-card {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .user-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
        margin-right: 20rpx;
    }

    .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 10rpx 0;
    }

    .user-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .user-details {
        display: flex;
        font-size: 26rpx;
        color: #999;
        margin-top: 10rpx;
    }

    .status {
        font-size: 26rpx;
        color: #666;
        margin-top: 5rpx;
    }

    .hi-btn {
        background-color: #7d70f4;
        color: #fff;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
    }
</style>